<template>
  <router-view />
</template>
<script>
import { inject, onMounted, reactive, computed, toRefs } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();
    const socket = inject("socket");
    const state = reactive({
      mainName: "fade", // 内容区域动画名
      userInfo: computed(() => {
        return store.state.userInfo;
      }),
      conversationsList: computed(() => {
        return store.state.conversationsList;
      }),
      sysNewsList: computed(() => {
        return store.state.sysNewsList;
      }),
      allChatList: computed(() => {
        return store.state.allChatList;
      }),
    });
    onMounted(() => {
      socket.on("connection", (msg) => {
        console.log(msg);
      });
      socket.on("getHisMeg", (msg) => {
        console.log(msg);
        // 获取历史信息
        msg.data.map((item) => (item.nickname = item.self.nickname));
        store.commit("historyMsgList", {
          data: msg.data,
          count: msg.data.length,
        });
        // const data = msg.filter(
        //   (item) => item.read.indexOf(state.userInfo.userName) === -1
        // );
        // console.log(data, "2");
      });
      socket.on("takeValidate", (obj) => {
        console.log(obj, "takeValidate");
      });
      socket.on("ValidateSuccess", (val) => {
        console.log(val);
        store.dispatch("getUserInfo");
      });
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang="scss"></style>
<style lang="scss">
#app {
  width: 100vw;
  height: 100vh;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  font-size: 1rem;
}
</style>
